<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的书籍</title>
    <link rel="stylesheet" href="./lib/element-plus.css">
    <script src="./lib/vue.global.js"></script>
    <script src="./lib/element-plus.js"></script>

    <style>
        .book-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .book-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .book-card {
            transition: all 0.3s;
        }
        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .book-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="book-container">
            <el-button type="primary" @click="showCreateDialog">创建新书</el-button>
            
            <div class="book-list">
                <el-card 
                    v-for="book in books" 
                    :key="book.id" 
                    class="book-card"
                    shadow="hover"
                >
                    <template #header>
                        <div class="card-header">
                            <span>{{ book.bookName }}</span>
                        </div>
                    </template>
                    <div class="book-content">
                        <p>{{ book.description || '暂无描述' }}</p>
                        <p>创建时间: {{ formatDate(book.createdAt) }}</p>
                    </div>
                    <div class="book-actions">
                        <el-button type="primary" size="small" @click="openBook(book)">打开</el-button>
                        <el-button type="primary" size="small" @click="editBook(book)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteBook(book)">删除</el-button>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 创建/编辑书籍对话框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle">
            <el-form :model="currentBook">
                <el-form-item label="书名" required>
                    <el-input v-model="currentBook.bookName" placeholder="请输入书名"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input 
                        v-model="currentBook.description" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入书籍描述"
                    ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitBook">确认</el-button>
            </template>
        </el-dialog>
    </div>

    <script type="module">
        import { http } from './api.js';
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    books: [],
                    dialogVisible: false,
                    dialogTitle: '创建新书',
                    currentBook: {
                        id: null,
                        bookName: '',
                        description: '',
                        createdAt: null
                    },
                    isEditing: false
                }
            },
            created() {
                this.fetchBooks();
            },
            methods: {
                async fetchBooks() {
                    try {
                        const res = await http.getBookList()
                        this.books = res.data
                        console.log('书籍列表:', res);
                    } catch (error) {
                         this.$message.error('获取书籍列表失败');
                        console.error(error);
                    }
                },
                showCreateDialog() {
                    this.dialogTitle = '创建新书';
                    this.currentBook = {
                        bookName: '',
                        description: '',
                        createdAt: null
                    };
                    this.isEditing = false;
                    this.dialogVisible = true;
                },
                editBook(book) {
                    this.dialogTitle = '编辑书籍';
                    this.currentBook = { ...book };
                    this.isEditing = true;
                    this.dialogVisible = true;
                },
                async deleteBook(book) {
                    try {
                        await this.$confirm('确定要删除这本书吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        });
                        
                        await http.deleteBook(book.id);
                        this.books = this.books.filter(b => b.id !== book.id);
                        this.$message.success('删除成功');
                    } catch (error) {
                        if (error !== 'cancel') {
                            this.$message.error('删除失败');
                        }
                    }
                },
                async submitBook() {
                    console.log('提交书籍:', this.currentBook);
                    if (!this.currentBook.bookName) {
                        this.$message.warning('请输入书名');
                        return;
                    }

                    try {
                        const bookData = {
                            bookName: this.currentBook.bookName,
                            description: this.currentBook.description
                        };

                        if (this.isEditing) {
                            console.log('更新书籍:', this.currentBook.id, bookData);
                            await http.updateBook(this.currentBook.id, {
                                id: this.currentBook.id,
                                ...bookData
                            });
                            const index = this.books.findIndex(b => b.id === this.currentBook.id);
                            if (index !== -1) {
                                this.books[index] = { ...this.currentBook };
                            }
                            this.$message.success('更新成功');
                        } else {
                            const response = await http.createBook( bookData);
                            const newBook =response.data;
                            this.books.unshift(newBook);
                            this.$message.success('创建成功');
                        }
                        this.dialogVisible = false;
                    } catch (error) {
                        this.$message.error(this.isEditing ? '更新失败' : '创建失败');
                        console.error(error);
                    }
                },
                formatDate(date) {
                    if (!date) return '';
                    return new Date(date).toLocaleString();
                },
                openBook(book) {
                    // 这里可以添加打开书籍的逻辑
                    // 例如跳转到编辑页面或阅读页面
                    window.location.href = `main.html?bookId=${book.id}`;
                }
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>